<template>
  <div class="header">
    <el-button type="info"  :icon="ISopenIcon" circle @click="isopena"></el-button>
    <label><mark>:注意$router是整个路由的实例 而$route是当前页面的实例路由</mark></label>
    <el-col :span="3">
      <span class="demonstration"></span>
      <el-dropdown trigger="click"  @command="handleCommand">
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
        <el-dropdown-menu slot="dropdown" > 
          <el-dropdown-item icon="el-icon-s-custom" command = "person">个人中心</el-dropdown-item>
          <el-dropdown-item icon="el-icon-coordinate" command="out" >退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
  </div>
</template>

<script>
export default {
  name: "Header",
  data(){
    return{
      iSopenss:"el-icon-s-unfold"
    }
  },
  methods:{
    handleCommand(command){
      console.log(1);
      
      if (command=='out') {
        this.$router.push({
          name:"login",
        })
      }

    },
    opens(){
      this.$bus.$emit("opens",this.iSopen = !this.iSopen)
      console.log(this.iSopen)

    },
    isopena(){
      console.log("www")
      this.$store.commit("isCollapseMenu")
    },
    // logout(command){
    // @command="logout"
    //   console.log(command)
    //   if(command === 'out'){
    //     this.$router.push({
    //       name:"login",
    //     })
    //   }else if (command ==="person") {
    //     this.$router.push({
    //       name:"person",
    //     })
    //   }
    // }
  },
  computed:{
    ISopenIcon(){
     this.iSopenss = this.$store.state.tab.isCollapse?"el-icon-s-unfold":"el-icon-s-fold"
     return this.iSopenss
   }
  },
  mounted () {
    console.log(this.$store.state)
  }
}
</script>

<style  lang="less" scoped>
.header{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .el-button{
    border-radius: 50%;
  }
  .el-col{
    .el-dropdown-link{
      color: white;
    }
  }
}
</style>